<template>
    <div class="page-container">
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>组合产品列表</span>
                    <el-button type="primary" @click="openCreateDialog">创建新组合</el-button>
                </div>
            </template>
            <el-table :data="combinations" v-loading="loading" style="width: 100%">
                <el-table-column prop="id" label="ID" width="60"></el-table-column>
                <el-table-column prop="name" label="组合名称" width="200"></el-table-column>
                <el-table-column prop="riskLevel" label="风险等级" width="100"></el-table-column>
                <el-table-column prop="status" label="状态" width="120">
                    <template #default="scope">
                        <el-tag :type="getStatusTagType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" width="180">
                     <template #default="scope">{{ new Date(scope.row.createTime).toLocaleString() }}</template>
                </el-table-column>
                <el-table-column label="操作" width="200" fixed="right">
                    <template #default="scope">
                        <el-button size="small" type="primary" @click="openEditDialog(scope.row)" :disabled="scope.row.status !== 'DRAFT'">编辑</el-button>
                        <el-button 
                            v-if="scope.row.status === 'DRAFT' || scope.row.status === 'REJECTED'" 
                            size="small"
                            type="success" 
                            @click="handleSubmitForApproval(scope.row)">
                            提交审核
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <CombinationForm 
            v-model:visible="formDialogVisible" 
            :combination-data="selectedCombination"
            @saved="handleSave" 
        />
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios'; // 直接引入 axios
import { ElMessage } from 'element-plus';
import CombinationForm from '@/views/combinations/CombinationForm.vue';

const combinations = ref([]);
const loading = ref(true);
const formDialogVisible = ref(false);
const selectedCombination = ref(null);

const fetchcombinations = async () => {
    loading.value = true;
    try {
        // 直接调用 axios
        const response = await axios.get('/api/combinations');
        combinations.value = response.data;
    } catch (error) {
        ElMessage.error('获取组合列表失败: ' + (error.response?.data?.message || error.message));
    } finally {
        loading.value = false;
    }
};

const statusMap = {
    DRAFT: { text: '草稿', type: 'info' },
    PENDING_APPROVAL: { text: '待审核', type: '' },
    APPROVED: { text: '已上架', type: 'success' },
    REJECTED: { text: '已驳回', type: 'danger' },
};

const getStatusText = (status) => statusMap[status]?.text || '未知';
const getStatusTagType = (status) => statusMap[status]?.type || 'info';

const openCreateDialog = () => {
    selectedCombination.value = null;
    formDialogVisible.value = true;
};

const openEditDialog = (combination) => {
    selectedCombination.value = combination;
    formDialogVisible.value = true;
};

const handleSave = async (data, isEdit) => {
    try {
        if (isEdit) {
            // 后端需要实现 PUT /api/combinations/{id} 接口
            await axios.put(`/api/combinations/${data.id}`, data);
            ElMessage.success('组合更新成功');
        } else {
            await axios.post('/api/combinations', data);
            ElMessage.success('组合创建成功');
        }
        formDialogVisible.value = false;
        fetchcombinations();
    } catch (error) {
        ElMessage.error('保存失败: ' + (error.response?.data?.message || error.message));
    }
};

const handleSubmitForApproval = async (combination) => {
    try {
        await axios.post(`/api/combinations/${combination.id}/submit`);
        ElMessage.success(`组合 "${combination.name}" 已成功提交审核`);
        fetchcombinations();
    } catch (error) {
        ElMessage.error('提交审核失败: ' + (error.response?.data?.message || error.message));
    }
};

onMounted(fetchcombinations);
</script>

<style scoped>
.page-container {
    padding: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>